<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <%@include file="common/lib_css.jspf"%>
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
    <%@include file="common/header.jspf"%>

    <!-- Left side column. contains the logo and sidebar -->
    <%@include file="common/sidebar.jspf"%>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                信息总览
                <small>Information Overview</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="<spring:url value='/index'/>"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li class="active">信息总览</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- Your Page Content Here -->
            <div class="row">
                <div class="col-xs-12">
                    <div class="box ">
                        <div class="box-header with-border">
                            <i class="fa fa-list"></i>
                            <h6 class="box-title">发包器列表</h6>
                        </div>
                        <div class="box-body">
                            <table id="packageList" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>IP地址</th>
                                    <th>描述</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <div class="box ">
                        <div class="box-header">
                            <i class="fa fa-file-text-o"></i>
                            <h6 class="box-title">资源使用情况</h6>
                        </div>
                        <div class="box-body box-profile">
                            <div class="table-responsive">
                                <table class="table">
                                    <tr>
                                        <td style="width:50%">CPU使用率</td>
                                        <td><span class="pull-right text-green">30%</span></td>
                                    </tr>
                                    <tr>
                                        <td>内存使用率</td>
                                        <td ><span class="pull-right text-red">90%</span></td>
                                    </tr>
                                    <tr>
                                        <td>硬盘使用率</td>
                                        <td><span class="pull-right text-green">10%</span></td>
                                    </tr>
                                    <tr>
                                        <td>端口使用率</td>
                                        <td><span class="pull-right text-yellow">40%</span></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="box ">
                        <div class="box-header">
                            <i class="fa fa-file-text-o"></i>
                            <h6 class="box-title">发包器信息</h6>
                        </div>
                        <div class="box-body box-profile">
                            <div class="table-responsive">
                                <table class="table">
                                    <tr>
                                        <td style="width:50%">IP地址</td>
                                        <td><span class="pull-right text-blue">192.168.0.221</span></td>
                                    </tr>
                                    <tr>
                                        <td>系统名称</td>
                                        <td ><span class="pull-right text-blue">esix-Ubuntu</span></td>
                                    </tr>
                                    <tr>
                                        <td>日期</td>
                                        <td><span class="pull-right text-light-blue">2017-01-20</span></td>
                                    </tr>
                                    <tr>
                                        <td>系统版本</td>
                                        <td><span class="pull-right text-blue">1.0.0</span></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="box ">
                        <div class="box-header with-border">
                            <i class="fa fa-bar-chart-o"></i>
                            <h3 class="box-title">资源图表</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="row">
                                <!-- /.col -->
                                <div class="col-md-4">
                                    <ul class="nav nav-pills nav-stacked">
                                        <li>
                                            <a href="#">
                                                CPU
                                                <span class="pull-right text-red">
                                                    4%
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                            内存
                                            <span class="pull-right text-yellow">
                                                4%
                                            </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                            硬盘
                                            <span class="pull-right text-blue">
                                                10%
                                            </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                            端口
                                            <span class="pull-right text-green">
                                                10%
                                            </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <!-- /.col -->
                                <div class="col-md-8">
                                    <div id="interactive" style="height: 300px;"></div>
                                </div>

                            </div>
                            <!-- /.row -->
                        </div>
                        <!-- ./box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
        </section>
        <!-- /.content -->
    </div>

    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <%@include file="common/footer.jspf"%>

</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->
<%@include file="common/lib_js.jspf"%>

<!-- FLOT CHARTS -->
<script src="/plugins/flot/jquery.flot.min.js"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="/plugins/flot/jquery.flot.resize.min.js"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="/plugins/flot/jquery.flot.pie.min.js"></script>
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
<script src="/plugins/flot/jquery.flot.categories.min.js"></script>

<!-- 首页概览信息 JS -->
<script src="<spring:url value="/js/index.js"/>"></script>

<script type="text/javascript">
    edit_btn_template = "<a href='{url}' class='btn btn-info btn-sm fa fa-edit'>编辑</a>";
</script>

</body>
</html>
